"use client"
import { Sidebar } from "@/components/sidebar";
import { ChatBarImage } from "@/components/chat-bar-image";
import { useEffect, useState } from 'react';
import axios from "axios";

export default function Home() {

  const [usageBasic, setUsageBasic] = useState(0);
  const [usagePremium, setUsagePremium] = useState(0);
  const [vipLevel, setVipLevel] = useState(0);
  const [isLoginVisible, setIsLoginVisible] = useState(true);

  const getUsage = () => {

    let config = {
      method: 'get',
      maxBodyLength: Infinity,
      url: `${process.env.NEXT_PUBLIC_API_URL}/api/user/usage`
    };

    axios.request(config)
      .then((response) => {
        setUsageBasic(response.data.usageBasic);
        setUsagePremium(response.data.usagePremium);
        setVipLevel(response.data.vipLevel)
        setIsLoginVisible(false)
      })
      .catch((error) => {
        console.log(error);
        setIsLoginVisible(true);
      });
  }

  useEffect(() => {
    getUsage();
  });


  return (
    <>
      <div className="flex">

        <div className="w-64">
          <Sidebar usagePremium={usagePremium} usageBasic={usageBasic} vipLevel={vipLevel} isLoginVisible={isLoginVisible} ></Sidebar>
        </div>
        <div className="w-full h-screen p-4 bg-[#bce5b6] ">
          <ChatBarImage model="classify" getUsage={getUsage} ></ChatBarImage>
        </div>
        {/* <Login></Login> */}
      </div>
    </>

  );
}
